<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2021-09-10 08:54:06
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-24 11:26:47
-->
<template>
  <div>
    <div class="allMain">
      <el-dialog
        title="人员报名"
        :visible.sync="dialogObj.detailShow"
        width="60%"
        @close="detailClose"
        :close-on-click-modal="false"
      >
        <div v-if="signUp.length > 1" class="main">
          <el-steps :active="active" simple finish-status="success">
            <el-step
              :title="item.name"
              v-for="(item, index) in signUp"
              :key="index"
            >
            </el-step>
          </el-steps>
          <div
            v-for="(item, index) in formList"
            :key="index"
            :class="active == index ? 'main-content' : ''"
          >
            <div
              v-for="(item1, index1) in item"
              :key="index1"
              v-show="item1.isHidden"
              style="width: 50%"
            >
              <main-con
                :formList="item1"
                v-if="index === active"
                class="main-con"
                ref="mainContent"
              ></main-con>
            </div>
          </div>
        </div>
        <div v-else class="main">
          <div
            v-for="(item, index) in formList"
            :key="index"
            class="main-content"
          >
            <div
              v-for="(item1, idnex1) in item"
              :key="idnex1"
              style="width: 50%"
              v-show="item1.isHidden"
            >
              <main-con
                :formList="item1"
                class="main-con"
                ref="mainContent"
              ></main-con>
            </div>
          </div>
        </div>
        <span slot="footer">
          <el-button @click="goBack">取消</el-button>
          <el-button type="primary" @click="next">下一步</el-button>
        </span>
      </el-dialog>
    </div>
    <div v-if="dialogPriceEject">
      <el-dialog
        title="订单支付"
        :visible.sync="dialogPrice"
        width="50%"
        custom-class="dialogClass"
        @close="PriceClose"
        :close-on-click-modal="false"
      >
        <div class="basics">账户信息</div>
        <div class="basics-detail">
          <div class="basics-detail-info">
            <span>考试名称：</span>
            <span>{{ ExaInfo.examinationName }}</span>
          </div>
          <div class="basics-detail-info">
            <span> 考试批次：</span>
            <span>{{ ExaInfo.batchName }}</span>
          </div>
          <div class="basics-detail-info">
            <span> 报名人数：</span>
            <span>{{ signUp.length }}人</span>
          </div>
          <div class="discount">
            <div class="basics">优惠选择</div>
            <div class="open" @click="collapseEdit">
              <span>{{ collapse }}</span>
              <i class="iconfont icon-xiala" v-if="collapse == '展开'"></i>
              <i class="iconfont icon-tabshouqi" v-else></i>
            </div>
          </div>
          <div class="discountList" v-if="collapseShow">
            <template v-for="(item, index) in couponList">
              <div
                :key="index"
                class="discounmtDetail"
                :class="index == discounmtActive ? 'selectActive' : ''"
                @click="selectOffers(item, index)"
              >
                <div class="detailLeft">
                  <div class="price">
                    {{ item | price }}
                  </div>
                  <div class="type">
                    {{ item | type }}
                  </div>
                </div>
                <div class="detailRight">
                  <el-tooltip
                    :content="item.name"
                    placement="top"
                    effect="dark"
                  >
                    <div class="discountName">
                      {{ item.name }}
                    </div>
                  </el-tooltip>
                  <div class="discountTime">有效期至</div>
                  <div class="">
                    {{ item.finishTime }}
                  </div>
                </div>
              </div>
            </template>
          </div>
          <div class="total">
            <div class="basics">合计</div>
            <div class="allTariff">
              <div class="allMoney">
                订单总金额：
                <span>{{ allPrice }}</span>
              </div>
              <div class="discountMoney">
                优惠抵扣：<span>{{
                  discounmtData == null ? "0" : discounmtData | price
                }}</span>
              </div>
              <div class="amountMoney">
                应付金额：<span>{{ payable }}</span>
              </div>
            </div>
          </div>
          <span slot="footer" class="downTip">
            <el-button type="primary" @click="onOrder"> 提交订单 </el-button>
          </span>
        </div>
      </el-dialog>
    </div>

    <el-dialog
      title="订单支付"
      :visible.sync="dialogOrder"
      width="50%"
      style="margin-left: 200px"
      custom-class="dialogClass"
      @close="payClose"
      v-if="dialogOrderEject"
      :close-on-click-modal="false"
    >
      <div class="basics">订单详情</div>
      <div class="basics-detail">
        <div class="basics-detail-info">
          <span>考试名称：</span>
          <span>{{ ExaInfo.examinationName }}</span>
        </div>
        <div class="basics-detail-info">
          <span> 考试批次：</span>
          <span>{{ ExaInfo.batchName }}</span>
        </div>
        <div class="basics-detail-info">
          <span> 报名人数：</span>
          <span>{{ signUp.length }}人</span>
        </div>
        <div class="basics-detail-info">
          <span> 应付金额：</span>
          <span class="priceall">¥ {{ payable }}</span>
        </div>
        <!-- <div class="basics-detail-info">创建时间：<span></span></div> -->
      </div>
      <div>
        <div class="basics" style="margin-top: 30px">支付方式</div>
        <div class="exainfoPay">
          <div class="payment-all">
            <div
              class="payment"
              v-if="chatShow"
              @click="chat"
              :class="{ active: dialog == 0 }"
            >
              <img src="@/assets/images/wechat.png" alt="" />
              微信支付
              <div class="payment-img" v-if="dialog == 0">
                <img src="@/assets/images/xiabiao.png" alt="" />
              </div>
            </div>
            <div
              class="payment"
              v-if="aliShow"
              @click="ali"
              :class="{ active: dialog == 1 }"
            >
              <img src="@/assets/images/paybaby.png" alt="" />
              支付宝支付
              <div class="payment-img" v-if="dialog == 1">
                <img src="@/assets/images/xiabiao.png" alt="" />
              </div>
            </div>
            <div
              class="payment"
              @click="offline"
              v-if="onlineShow"
              :class="{ active: dialog == 2 }"
            >
              <img src="@/assets/images/xianxia.png" alt="" />
              线下支付
              <div class="payment-img" v-if="dialog == 2">
                <img src="@/assets/images/xiabiao.png" alt="" />
              </div>
            </div>
          </div>
          <div class="">
            <div class="payimg" v-if="dialog == 0">
              <div class="QRCode">
                <img :src="PayImgUrl" alt="" />
                <div class="footer">
                  <i class="iconfont icon-saoyisao"></i>
                  <div class="footer-zi">
                    <div>打开微信</div>
                    <div>扫一扫付款</div>
                  </div>
                </div>
              </div>
              <div class="wxS">
                <img src="@/assets/images/wxS.jpg" alt="" />
              </div>
            </div>
            <div class="payimg" v-else-if="dialog == 1">
              <div class="QRCode">
                <img :src="PayImgUrl" alt="" />
                <div class="footer">
                  <i class="iconfont icon-saoyisao"></i>
                  <div class="footer-zi">
                    <div>打开支付宝</div>
                    <div>扫一扫付款</div>
                  </div>
                </div>
              </div>
              <div class="wxS">
                <img src="@/assets/images/wxS.jpg" alt="" />
              </div>
            </div>
            <div v-else-if="dialog == 2" class="comInfo">
              <div class="basics">订单详情</div>
              <div class="basics-detail">
                <div class="basics-detail-info">
                  账户名称：<span>{{ ExaInfo.company }}</span>
                </div>
                <div class="basics-detail-info">
                  开户银行：<span>{{ fwData.bank }}</span>
                </div>
                <div class="basics-detail-info">
                  银行账号：<span>{{ fwData.bankAccount }}</span>
                </div>
                <div class="basics-detail-info">
                  汇款金额：<span> ¥ {{ payable }} </span>
                </div>
              </div>
              <div class="basics-detail-info lastInfo">
                <span>付款回执：</span>
                <span>
                  <el-upload
                    ref="upload"
                    action="#"
                    :auto-upload="false"
                    accept="image/jpeg,image/png"
                    :limit="1"
                    :on-change="getFile"
                    :file-list="fileList"
                    :on-remove="handleRemove"
                    class="uploadlast"
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                </span>
              </div>
              <div class="load">
                <el-button
                  type="primary"
                  @click="payImmediately"
                  v-if="dialog == 2"
                >
                  已完成支付
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- <div slot="footer" class="downTip">
        <div class="tip">支付成功之前请勿关闭页面！</div>
        <div>
          <span>应付金额：</span>
          <span style="margin-right: 20px"> ¥ {{ allPrice }} </span>
          <el-button type="primary" @click="payImmediately" v-if="dialog == 2">
            已完成支付
          </el-button>
        </div>
      </div> -->
    </el-dialog>
  </div>
</template>
<script>
import {
  getCustom,
  registerInformation,
  aliPay,
  aliQuery,
  aliCancel,
  aliSet,
  chatSet,
  chatPay,
  chatQuery,
  chatCancel,
  selectDeptInfoByOrgId,
  companyCoupon,
  calculate,
} from "@/api/registration";
import { checkPay } from "@/api/currency";
import MainCon from "./mainCon.vue";
export default {
  components: {
    MainCon,
  },
  filters: {
    price: function (val) {
      if (val.type == 1) {
        val = "¥" + val.coupon;
      } else if (val.type == 2) {
        val = val.coupon + "折";
      }
      return val;
    },
    type: function (val) {
      if (val.type == 1) {
        val = "满减券";
      } else if (val.type == 2) {
        val = "折扣券";
      }
      return val;
    },
  },
  data() {
    return {
      payable: 0,
      discounmtData: null,
      discounmtActive: null,
      collapseShow: false,
      couponList: [
        {
          coupon: 100,
          type: 1,
          name: "是大姐啊还是大姐卡和手机快点哈",
          finishTime: "2022-12-12",
        },
        {},
        {},
        {},
        {},
      ],
      collapse: "展开",
      chatShow: true,
      aliShow: true,
      onlineShow: true,
      dialogOrderEject: false,
      dialogPriceEject: false,
      dialogPrice: false,
      fwData: {},
      timer: null,
      timer2: null,
      endTime: 0,
      PayImgUrl: "",
      outTradeNo: "",
      voucher: "",
      voucherShow: true,
      fileList: [],
      formList: [],
      arr: [],
      allPrice: "",
      dialogImageUrl: "",
      dialogVisible: false,
      ExaInfo: {},
      sign: "在线报名",
      active: 0,
      dialogOrder: false,
      innerVisibleOne: false,
      innerVisibleTwo: false,
      innerVisibleThree: false,
      dialog: Number,
      // PayConfig: {},
    };
  },
  props: {
    dialogObj: {
      type: Object,
      required: true,
    },
    signUp: {
      type: Array,
      required: true,
    },
  },
  created() {
    console.log(this.signUp);
    this.ExaInfo = JSON.parse(sessionStorage.getItem("ExaInfo")) || {};
    this.arr = [];
    this.$nextTick(function () {
      if (this.signUp.length == 1) {
        this.arr.push(this.signUp[0].id);
      } else {
        this.signUp.forEach((item) => {
          this.arr.push(item.id);
        });
      }
      this.getCustomList();
    });
  },
  mounted() {},

  methods: {
    PriceClose() {
      this.allPrice = "";
      this.payable = 0;
      this.couponList = [];
      this.collapse = "展开";
      this.discounmtData = null;
      this.discounmtActive = null;
      this.collapseShow = false;
      this.dialogPriceEject = false;
    },
    // 提交订单
    onOrder() {
      this.dialogOrderEject = true;
      this.$nextTick(() => {
        this.dialogOrder = true;
        this.checkPay();
      });
    },
    // 计算价格
    calculate() {
      calculate({
        couponGrantId: this.discounmtData.couponGrantId,
        id: this.discounmtData.id,
        name: this.discounmtData.name,
        content: this.discounmtData.content,
        threshold: this.discounmtData.threshold,
        fullAmount: this.discounmtData.fullAmount,
        coupon: this.discounmtData.coupon,
        amount: this.allPrice,
        type: this.discounmtData.type,
      }).then((res) => {
        this.payable = res.msg;
      });
    },
    // 选择优惠
    selectOffers(item, index) {
      this.discounmtActive = index;
      this.discounmtData = item;
      this.$nextTick(() => {
        this.calculate();
      });
    },
    // 改变展开
    collapseEdit() {
      this.collapseShow = !this.collapseShow;
      if (this.collapseShow) {
        this.collapse = "收起";
      } else {
        this.collapse = "展开";
      }
    },
    // 获取优惠券列表
    getCoupon() {
      companyCoupon({
        batchId: this.ExaInfo.batchId,
        price: this.allPrice,
      }).then((res) => {
        this.couponList = res.data;
      });
    },
    // 获取已配置信息
    checkPay() {
      checkPay({
        orgId: this.ExaInfo.orgId,
      }).then((res) => {
        if (res.wx !== 1) {
          this.chatShow = false;
        }
        if (res.ali !== 1) {
          this.aliShow = false;
        }
        if (res.yl !== 1) {
          this.onlineShow = false;
        }
        if (this.chatShow == true) {
          this.chat();
        } else if (this.chatShow == false && this.aliShow == true) {
          this.ali();
        } else if (
          this.chatShow == false &&
          this.aliShow == false &&
          this.onlineShow == true
        ) {
          this.offline();
        }
      });
    },
    payClose() {
      clearInterval(this.timer2);
      clearInterval(this.timer);
    },
    // 线下支付
    offline() {
      if (this.timer !== null) {
        clearInterval(this.timer);
      }
      clearInterval(this.timer2);
      this.dialog = 2;
      selectDeptInfoByOrgId({ orgId: this.ExaInfo.orgId }).then((res) => {
        this.fwData = res.data;
      });
    },
    detailClose() {
      this.dialogObj.detailEject = false;
      this.$parent.signUp = [];
      this.voucherShow = true;
    },
    chat() {
      clearInterval(this.timer2);
      clearInterval(this.timer);
      this.endTime = 0;
      let that = this;
      this.dialog = 0;
      let fd = new FormData();
      fd.append("examInfo", sessionStorage.getItem("ExaInfo"));
      fd.append("count", JSON.stringify(that.signUp.length));
      fd.append("type", 1);
      fd.append("orgId", this.ExaInfo.orgId);
      fd.append("price", this.payable);
      // fd.append("wechatPayConfig", JSON.stringify(that.PayConfig));
      chatPay(fd).then((res) => {
        this.PayImgUrl = res.data.imgae;
        this.outTradeNo = res.data.orderNo;
        that.timer2 = setInterval(function () {
          console.log(that.endTime);
          that.endTime = that.endTime + 3;
          if (that.endTime == 60) {
            clearInterval(that.timer2);
            let fd2 = new FormData();
            fd2.append("orderNo", that.outTradeNo);
            fd2.append("orgId", that.ExaInfo.orgId);
            // fd2.append("wechatPayConfig", JSON.stringify(that.PayConfig));
            chatCancel(fd2).then((res) => {
              console.log(res);
            });
            that.endTime = 0;
            return that.chat();
          } else {
            let couponGrantId =
              that.discounmtData == null
                ? ""
                : that.discounmtData.couponGrantId;
            let fd1 = new FormData();
            fd1.append("orderNo", that.outTradeNo);
            fd1.append("orgId", that.ExaInfo.orgId);
            fd1.append("source", that.ExaInfo.source);
            fd1.append("examId", that.ExaInfo.examinationId);
            fd1.append("batchId", that.ExaInfo.batchId);
            fd1.append("peopleNum", that.signUp.length);
            fd1.append("originalPrice", that.allPrice);
            fd1.append("couponGrantId", couponGrantId);
            // fd1.append("wechatPayConfig", JSON.stringify(that.PayConfig));
            chatQuery(fd1).then((res) => {
              console.log(res);
              if (res.msg == "SUCCESS") {
                that.$message.success("支付成功");
                clearInterval(that.timer2);
                that.endTime = 0;
                that.storage();
                return (that.dialogObj.detailShow = false);
              }
            });
          }
        }, 3000);
      });
    },
    ali() {
      clearInterval(this.timer);
      clearInterval(this.timer2);
      this.endTime = 0;
      let that = this;
      this.dialog = 1;
      let fd = new FormData();
      fd.append("examInfo", sessionStorage.getItem("ExaInfo"));
      fd.append("count", that.signUp.length);
      fd.append("type", 1);
      fd.append("orgId", this.ExaInfo.orgId);
      fd.append("price", this.payable);
      // fd.append("aliPayConfig", JSON.stringify(this.PayConfig));
      aliPay(fd).then((res) => {
        this.PayImgUrl = res.data.oss;
        this.outTradeNo = res.data.outTradeNo;
        that.timer = setInterval(function () {
          that.endTime = that.endTime + 3;
          if (that.endTime == 60) {
            clearInterval(that.timer);
            let fd2 = new FormData();
            fd2.append("outTradeNo", that.outTradeNo);
            fd2.append("orgId", this.ExaInfo.orgId);
            // fd2.append("aliPayConfig", JSON.stringify(that.PayConfig));
            aliCancel(fd2).then((res) => {
              console.log(res);
            });
            that.endTime = 0;
            return that.ali();
          }
          let couponGrantId =
            that.discounmtData == null ? "" : that.discounmtData.couponGrantId;
          console.log(that.discounmtData);
          let fd1 = new FormData();
          fd1.append("outTradeNo", that.outTradeNo);
          fd1.append("orgId", that.ExaInfo.orgId);
          fd1.append("source", that.ExaInfo.source);
          fd1.append("examId", that.ExaInfo.examinationId);
          fd1.append("batchId", that.ExaInfo.batchId);
          fd1.append("peopleNum", that.signUp.length);
          fd1.append("originalPrice", that.allPrice);
          fd1.append("couponGrantId", couponGrantId);
          // fd1.append("aliPayConfig", JSON.stringify(that.PayConfig));
          aliQuery(fd1).then((res) => {
            if (res.msg == "TRADE_SUCCESS") {
              that.$message.success("支付成功");
              clearInterval(that.timer);
              that.endTime = 0;
              that.storage();
              return (that.dialogObj.detailShow = false);
            }
          });
        }, 3000);
      });
    },
    storage() {
         let couponGrantId =
            this.discounmtData == null ? "" : this.discounmtData.couponGrantId;
      let fd = new FormData();
      fd.append("list", JSON.stringify(this.formList));
      fd.append("examInfo", sessionStorage.getItem("ExaInfo"));
      fd.append("infos", JSON.stringify(this.signUp));
      fd.append("orderNumber", this.outTradeNo);
      fd.append("file", this.voucher);
      fd.append("orgId", this.ExaInfo.orgId);
      fd.append("source", this.ExaInfo.source);
      fd.append("originalPrice", this.allPrice);
      fd.append("couponGrantId", couponGrantId);
      fd.append("price", this.payable);
      registerInformation(fd).then((res) => {
        this.dialogOrder = false;
        this.dialogObj.detailShow = false;
        this.$router.push("/enSignUp");
      });
    },
    getCustomList() {
      let fd = new FormData();
      fd.append("examType", this.ExaInfo.id);
      fd.append("ids", JSON.stringify(this.arr));
      fd.append("batchId", this.ExaInfo.batchId);
      fd.append("check", "true");
      getCustom(fd).then((res) => {
        this.formList = res.data;
      });
    },
    // 转换成base64
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        let reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function () {
          imgResult = reader.result;
        };
        reader.onerror = function (error) {
          reject(error);
        };
        reader.onloadend = function () {
          resolve(imgResult);
        };
      });
    },
    getFile(file) {
      this.voucher = file.raw;
    },
    handleRemove(file) {
      this.voucher = "";
    },
    goBack() {
      this.dialogObj.detailShow = false;
      sessionStorage.removeItem("signUp");
      // this.$router.push("/stafflist");
      // sessionStorage.removeItem("signUp");
    },
    // 下一步
    next() {
      let arr = [];
      for (var i = 0; i < this.$refs.mainContent.length; i++) {
        this.$refs.mainContent[i].$refs.formList.validate((valid) => {
          if (!valid) {
            arr.push("false");
          } else {
            arr.push("true");
          }
        });
      }
      let a = arr.some((item) => {
        return item == "false";
      });
      if (a == true) {
        return;
      } else {
        if (this.active++ === this.signUp.length - 1) {
          this.active = this.active - 1;
          this.dialogPriceEject = true;
          this.$nextTick(function () {
            for (var i = 0; i < this.signUp.length; i++) {
              this.allPrice = this.accAdd(
                this.allPrice,
                this.ExaInfo.terminalPrice
              );
              this.payable = this.allPrice;
            }
            this.dialogPrice = true;
            this.getCoupon();
            // this.checkPay();
          });
        }
      }
    },
    payImmediately() {
      if (this.voucher == "") {
        return this.$message.info("请上传支付凭证！");
      }
      this.voucherShow = false;
      this.outTradeNo = "";
      let couponGrantId =
            this.discounmtData == null ? "" : this.discounmtData.couponGrantId;
      let fd = new FormData();
      fd.append("list", JSON.stringify(this.formList));
      fd.append("examInfo", sessionStorage.getItem("ExaInfo"));
      fd.append("infos", JSON.stringify(this.signUp));
      fd.append("orderNumber", this.outTradeNo);
      fd.append("file", this.voucher);
      fd.append("orgId", this.ExaInfo.orgId);
      fd.append("source", this.ExaInfo.source);
      fd.append("originalPrice", this.allPrice);
      fd.append("couponGrantId", couponGrantId);
      fd.append("price", this.payable);
      registerInformation(fd).then((res) => {
        this.$message.success(res.msg);
        this.voucherShow = true;
        this.dialogOrder = false;
        this.dialogObj.detailShow = false;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.allMain {
  /deep/ .el-dialog__body {
    height: 600px;
    overflow: auto;
  }
}
.main {
  width: 100%;
}
.main-content {
  display: flex;
  flex-wrap: wrap;

  width: 100%;
}
.content-all {
  width: 50%;
}
.basics {
  position: relative;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #2b2b2b;
  margin-top: 10px;
}
.basics::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 1px;
  width: 3px;
  height: 14px;
  background: #1267fa;
}
.basics-detail {
  margin-top: 20px;
  .basics-detail-info {
    margin-bottom: 10px;
    span {
      margin-left: 40px;
    }
  }
}

.active {
  border: 1px solid #1267fa !important;
}
.load {
  margin-top: 20px;
}

.comInfo {
  box-sizing: border-box;
  width: 414px;
  height: 284px;
  background-color: #f6f7f8;
  padding: 10px 20px;
  margin-top: 10px;
}

.tip {
  color: red;
  font-size: 16px;
}

/deep/ .el-dialog__footer {
  .downTip {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
}
.payimg {
  width: 414px;
  background-color: #f6f7f8;
  height: 215px;
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  padding-top: 22px;
  .QRCode {
    width: 139px;
    height: 175px;
    margin-left: 38px;
    background-color: #fff;
    img {
      width: 120px;
      height: 120px;
      margin-left: 10px;
      margin-top: 8px;
    }
    .footer {
      display: flex;
      justify-content: center;
      .footer-zi {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #6a6d7c;
      }
      i {
        margin-right: 10px;
        color: #1267fa;
      }
    }
  }
  .wxS {
    width: 173px;
    height: 197px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.exainfoPay {
  display: flex;
  .payment-all {
    .payment {
      margin-top: 16px;
      width: 235px;
      height: 71px;
      line-height: 71px;
      border-radius: 2px;
      border: 1px solid #d6d6d6;
      text-align: center;
      margin-right: 20px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      position: relative;
      .payment-img {
        position: absolute;
        bottom: -27px;
        right: -1px;
      }
      img {
        width: 22px;
        height: 22px;
        vertical-align: middle;
        margin-bottom: 4px;
      }
    }
  }
}
.priceall {
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 600;
  color: #ff0000;
}
.lastInfo {
  display: flex;
  .uploadlast {
    display: flex;
    align-items: flex-start;
    /deep/ .el-upload-list__item {
      margin-top: 0 !important;
      line-height: 1.1;
      .el-upload-list__item-name {
        width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
.discount {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .open {
    cursor: pointer;
  }
}
.discountList {
  margin-top: 20px;
  display: flex;
  overflow-x: auto;
}
.discounmtDetail {
  display: flex;
  margin-right: 20px;
  width: 244px;
  background: url("../../../../assets/images/wxz.png") no-repeat;
  background-size: 100% 100%;
  .detailLeft {
    width: 81px;
    height: 74px;
    text-align: center;
    .price {
      font-size: 20px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #ad6f15;
      margin-top: 17px;
    }
    .discountName {
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ad6f15;
      margin-top: 6px;
    }
  }
  .detailRight {
    padding-left: 20px;
    padding-top: 16px;
    width: 163px;
    height: 74px;
    .discountName {
      width: 123px;
      white-space: nowrap;
      /*溢出部分文字隐藏*/
      overflow: hidden;
      /*溢出部分省略号处理*/
      text-overflow: ellipsis;
    }
    .discountTime {
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #666666;
      margin-top: 6px;
    }
    .discountEffective {
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
    }
  }
}
.total {
  margin-top: 40px;
  .allTariff {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    span {
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ff0000;
      display: inline-block;
      width: 100px;
      text-align: right;
    }
    .allMoney {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #2b2b2b;
    }
    .discountMoney {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #2b2b2b;
      margin-top: 18px;
    }
    .amountMoney {
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #2b2b2b;
      margin-top: 30px;
    }
  }
}
.selectActive {
  background: url("../../../../assets/images/xz.png");
  background-size: 100% 100%;
}
</style>
